<!--
 @description 销量总体分析
 @fileName OverAllSalesReport.vue
 @author zengqiongying
 @created 2023/06/03 16:16:32
-->
<template>
  <div>
    <div class="dis-flex search-bar">
      <div class="activePageName"> 销量总体分析  </div>
      <div class="flex-full">
        <el-radio-group v-model="formData.categoryName">
          <el-radio
            v-for="item in categoryList"
            :key="item.dictName"
            :label="item.dictName"
          >{{ item.dictName }}</el-radio>
        </el-radio-group>

        <el-date-picker
          v-model="months"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="changeMonth"
        />
      </div>
      <div class="btns">
        <el-button :loading="isExporting" size="mini" type="primary" @click="handleExport">导出数据</el-button>
      </div>
    </div>
    <table-box
      v-loading="isDataLoad"
      :data="tableData"
      :table-config="tableConfig"
      :table-span-method="tableSpanMethod"
      :border="true"
      :show-page="false"
    >
      <el-table-column
        v-for="(prop,i) in tableHeadData"
        :key="i"
        :prop="prop"
        :label="prop"
        :min-width="i<2?120:80"
        :align="i===0?'left':'center'"
        :header-align="i===0?'left':'center'"
      >

        <template slot-scope="scope">
          <span v-if="['品类','销量','合计'].includes(prop)">{{ scope.row[prop] }}</span>
          <span
            v-else
            :class="{
              'green':scope.row.status && [1,'1'].includes(scope.row.status[prop]),
              'red':scope.row.status && [-1,'-1'].includes(scope.row.status[prop]),
            }"
          >
            <template v-if="scope.row.status &&scope.row.status[prop]">
              <span v-if="[1,'1'].includes(scope.row.status[prop])"> ↑</span>
              <span v-if="[-1,'-1'].includes(scope.row.status[prop])"> ↓</span>
            </template>
            {{ scope.row[prop] }}
          </span>
        </template>
      </el-table-column>
    </table-box>
  </div>
</template>
<script>
import { getOverAllSalesReport } from '@/api/display/recommendReport'
import SearchMixin from './mixins/Search'
import TableDataMixin from './mixins/TableData'
export default {
  name: 'OverAllSalesReport',
  mixins: [SearchMixin, TableDataMixin],
  data() {
    return {
      exportName: '销售总量分析',
      exportUrl: '/api/v1/displaySoftSaleNum/overAllSalesReportExport'
    }
  },
  created() {

  },
  methods: {
    async queryTableData() {
      const { categoryName } = this.formData
      await getOverAllSalesReport(this.formData).then(res => {
        const data = res.data
        const headerColumn = data['日期']
        const rowList = []
        for (const rowIndex in data) {
          // 重置表格行数据 (除日期以外的其他行)
          if (rowIndex !== '日期') {
            const obj = {
              '品类': categoryName,
              '销量': rowIndex
            }
            const row = data[rowIndex]
            headerColumn.forEach((prop, columnIndex) => {
              // 遍历表头，重置表格列数据
              obj[prop] = row[columnIndex]
            })
            if (rowIndex === '销售数量') {
              rowList.unshift(obj)
            } else {
              rowList.push(obj)
            }
          }
        }
        // 同比趋势与环比趋势作为判断环比与同比指标状态：1 上升， -1 下降
        const bodyList = rowList.filter(v => !['同比幅度', '环比幅度', '同比'].includes(v['销量'])) // 亦不显示同比
        const statusList = rowList.filter(v => ['同比幅度', '环比幅度'].includes(v['销量']))

        this.tableHeadData = ['品类', '销量', ...headerColumn]
        this.tableData = bodyList.map(row => {
          const label = row['品类']
          const label2 = row['销量']
          if (label2 === '同比' || label2 === '环比') {
            const status = statusList.find(v => v['品类'] === label && v['销量'] === label2 + '幅度')
            return {
              ...row, ...{ status }
            }
          }
          return row
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
